<template>
	<view class="yb-flex" :id="customIdSync" :class="customClassSync" :style="rootStyle">
		<slot></slot>
		<yb-text v-if="isError" :lines="1" :size="errorSync.size" :color="errorSync.color" :value="errorSync.text"></yb-text>
		<yb-text v-else-if="isEmpty" :lines="1" :size="emptySync.size" :color="emptySync.color" :value="emptySync.text"></yb-text>
	</view>
</template>

<script>
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	import Util from '../../js_sdk/util.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			value: '',
			test: {
				type: [String,RegExp],
				default: ''
			},
			required: {
				type: Boolean,
				default: true
			},
			error: {
				type: [String,Object],
				default () {
					return new Object
				}
			},
			empty: {
				type: [String,Object],
				default () {
					return new Object
				}
			},
			border: {
				type: [Boolean,Object],
				default: true
			}
		},
		computed: {
			Util () {
				return Util
			},
			rootStyle () {
				return this.filterStyle(
					{
						'border-width': (this.isError || this.isEmpty) && this.borderSync.show ? Util.pixelunit(this.borderSync.width) : 0,
						'border-style': this.borderSync.style,
						'border-color': this.isError ? this.errorSync.color : this.isEmpty ? this.emptySync.color : '',
						'border-radius': Util.pixelunit(this.borderSync.radius),
					}
				) + this.customStyleSync
			},
			errorSync () {
				return Object.assign({}, {
					text: '请输入正确的值',
					color: '#FF3B30',
					size: '24rpx'
				}, Util.typeof(this.error) == 'Object' ? this.error : Util.typeof(this.error) == 'String' ? {text: this.error} : {})
			},
			emptySync () {
				return Object.assign({}, {
					text: '不能输入空值',
					color: '#FF3B30',
					size: '24rpx'
				}, Util.typeof(this.empty) == 'Object' ? this.empty : Util.typeof(this.empty) == 'String' ? {text: this.empty} : {})
			},
			borderSync () {
				return Object.assign({}, {
					width: '1px',
					style: 'solid',
					radius: '10rpx',
					show: true
				}, Util.typeof(this.border) == 'Object' ? this.border : Util.typeof(this.border) == 'Boolean' ? { show: this.border } : {})
			},
		},
		data () {
			return {
				isError: false,
				isEmpty: false
			}
		},
		methods: {
			validate () {
				this.isEmpty = false
				this.isError = false
				if ( this.required && !this.value ) {
					this.isEmpty = true
					return false
				}
				if ( this.test && this.value ) {
					let regs = ['idcard', 'mobile', 'phone', 'price', 'email', 'bankcard']
					if ( regs.indexOf(this.test) > -1 ) {
						this.isError = !Util.reg(this.test, this.value)
						return !this.isError
					} else {
						this.isError = !new RegExp(this.test).test(this.value)
						return !this.isError
					}
				}
				return true
			}
		}
	}
</script>

<style>
</style>